<html lang="Zh_cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>数据源编辑</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue@2.1.0/dist/index.iife.min.js"></script>
    <!-- Import jQuery 3 -->
    <script src="/static/js/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/frame.css">
    <!--    bootstrap-->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="app" style="height: 100%;width: 100%">
    <el-table :data="files" style="width: 100%">
        <el-table-column prop="name" label="名称" width="300"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                >删除
                </el-button
                >
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    const App = {
        data() {
            return {
                files: [],
                filename: ""
            };
        },
        methods: {
            handleDelete(index, row){
                const that = this;
                $.get(
                    "/api/filedelete",
                    {
                        bookname: row.name
                    },
                    function (data){
                        if (data.length > 0){
                            alert(data)
                        }
                        that.files.splice(index, 1)
                    }
                )
            }
        },
        mounted() {
            const that = this;
            $.getJSON(
                "/api/getbooksfrombooksshelf",
                null,
                function (data) {
                    that.files = data.files
                    if (that.files.length > 0) {
                        that.filename = that.files[0].name
                    }
                }
            );
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>